<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染指令</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="status">
    <p v-if="status===1">当status为1时显示该行</p>
    <p v-else-if="status ===2">当status为2时显示该行</p>
    <p v-else>否则不显示该行</p>

    <template v-if="type">
        <label>用户名：</label>
        <!--添加Key与否决定是否复用input中的内容-->
        <input placeholder="输入用户名" key="name-input">
    </template>
    <template v-else>
        <label>邮箱：</label>
        <input placeholder="输入邮箱" key="mail-input">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            message: '这是一段文本',
            status: 2,
            type: true
        },
       methods:{
           handleToggleClick:function (){
               this.type = !this.type
           }
       }
    })
</script>
</body>
</html>
